<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>计算属性</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="ap">
        <!-- <p>
            原始信息是{{message}}
        </p>
        <p>倒过来的信息是{{reversemessage}}           
        </p> -->
        <p>{{site}}</p>
    </div>
    
</body>
<script>
    var app =new Vue({
        el:'#ap',
        // data是数据对象,对象或函数类型,只存储数据，组件(Vue(compenent))里只接受函数类型
        // data:{
        //     message:'Hello'
        // },
        // //methods与computed的区别，效果上两个都是一样的，但是 computed 是基于它的依赖缓存
        // // 只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行
        // // 使用 computed 性能会更好，但是如果不希望缓存，你可以使用 methods 属性
        // computed:{
        //     // 提供的函数将用作属性 app.reversedmessage 的 getter 
        //     reversemessage: function(){
        //         // this指向app这个实例
        //         return this.message.split('').reverse().join('')
        //     }
        // }

        data:{
            firstName:'Lee',
            lastName:'Mark'
        },
        computed:{
            site:{
                // get用来获取属性值。同时计算生成新的值
                // set：用来改变船体过来的值，发生改变的时候，同时让数据的内容也发生改变
                get:function(){
                    return this.firstName +' '+this.lastName
                },
                set: function(value){
                    var names =value.split(" ");
                    // names[0] = this.firstName;
                    // names[1] = this.lastName;
                    this.firstName = names[0];
                    this.lastName = names[1];
                }
            }
        }
    })
    app.site ="Sinnie Bai"

</script>
</html>